<!-- 我的 -->
<template>
  <view class="container">
    <view class="head">
			<u-image class='set' width="50rpx" height="44rpx" src="/static/me/wode_shezhizong@2x.png" @click="jump('/pages/my/set')"></u-image>
			<view class="panel">
				<view class="edit" @click="jump('/pages/my/profile')">
						<u-image width="37rpx" height="40rpx" src="/static/me/bianji@2x.png"></u-image>
						<text>编辑资料</text>
				</view>
				<view class="user-box">
					<image src="/static/me/avatar.jpg" class="avatar" mode=""></image>
					<view class="user-name" v-text="userInfo.username">用户昵称</view>
					<view class="tag"> 邀请收益 133300w</view>
				</view>
				<view class="nav">
					<view class="nav-item" v-for="item in navList" @click="jump(item.url)">
						<image :src="item.img" class="icon" mode=""></image>
						<view class="name">{{item.text}}</view>
					</view>
				</view>
			</view>
		</view>
    
    <view class="cell-box">
				<u-cell-group :border="false" v-for="item in cellList" :key="item.text">
					<u-cell-item :title="item.text" bg-color="#fff" @click="doJump(item.url)">
						<image slot="icon" :src="item.img" class="icon" mode=""></image>
					</u-cell-item>

				</u-cell-group>
			</view>

			<kefu-popup :showKefu="showKefu" @closePopup="closePopup"></kefu-popup>
     
  </view>
  
</template>

<script>
import APPUpdate, { getCurrentNo } from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
import componentConfig from "@/config/componentConfig"
import {commonMixin} from '@/common/mixin/mixin.js'
import kefuPopup from '@/components/kefu-popup/index'
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  data () {
    return {
			showKefu: false,
      versionCode:0,
      versionName:'',
			navList:[
				{
					url:'/pages/my/invite/invite',
					img:'/static/me/wode_yaoqing@2x.png',
					text:'邀请有礼'
				},{
					url:'/pages/my/asset/asset',
					img:'/static/me/wode_zichan@2x.png',
					text:'我的资产'
				},{
					url:'/pages/my/charge/charge',
					img:'/static/me/wode_chongzhi@2x.png',
					text:'充值中心'
				},
			],
			cellList: [
				{
					url:'/pages/my/profile',
					img:'/static/me/wode_ziliao@2x.png',
					text:'我的资料'
				},
				{
					url:'/pages/my/charge/charge_record',
					img:'/static/me/wode_ziliao@2x.png',
					text:'充值记录'
				},
				{
					url:'/pages/my/keybind',
					img:'/static/me/wode_bangding@2x.png',
					text:'API绑定设置'
				},{
					url:'/pages/my/promotionPoster',
					img:'/static/me/wode_fenxiang@2x.png',
					text:'分享'
				},{
					url:'',
					img:'/static/me/wode_kefu@2x.png',
					text:'客服'
				},{
					url:'/pages/my/help',
					img:'/static/me/wode_help@2x.png',
					text:'帮助'
				},{
					url:'/pages/my/set',
					img:'/static/me/wode_shezhi@2x.png',
					text:'设置'
				}
				,{
					url:'/pages/test/test',
					img:'/static/me/wode_shezhi@2x.png',
					text:'测试'
				},{
					url:'/pages/coin/deal2',
					img:'/static/me/wode_shezhi@2x.png',
					text:'测试交易'
				}
			]
    };
  },
	mixins: [commonMixin],
  components: {
		kefuPopup
	},

  computed: {
		...mapState('user', ['isLogin','userInfo','accessToken']),
	},

  onLoad(){
    this.getVersionName()
		//this.test()
		let versionInfo={
			"versionCode": "100",
			"versionName": "1.0.0"
		}

		componentConfig.getServerNo(versionInfo, true, res => {
			// console.log('getServerNo', res)
		})
  },
	onShow(){
		// console.log('show login', this.isLogin)
		// console.log('userInfo', this.userInfo)
	},
  mounted() {
		// this.hello()
	},

  methods: {
		test(){
		
		},
    getVersionName() {
				// #ifdef APP-PLUS
				getCurrentNo(res => {
					this.versionName = res.versionName,
          this.versionCode = res.versionCode
				});
				// #endif
				// #ifndef APP-PLUS
				uni.showToast({
					title:"请在APP环境使用",
					icon:"none"
				});
				// #endif
			},
			onAPPUpdate(){
				// #ifdef APP-PLUS
				// true 在出现无新版本的情况下，有弹窗提示
				// false 无提示（一般在APP.vue使用）
				console.log('center 查看是否需要更新')
				APPUpdate(true);
				// #endif
				// #ifndef APP-PLUS
				uni.showToast({
					title:"请在APP环境使用",
					icon:"none"
				});
				// #endif
			},
			doJump(url){
				if(url){
					this.jump(url)
				} else {
					console.log('shoukefu')
					this.showKefu = true
				}
				
			},
			closePopup(c){
				this.showKefu = c
				console.log('closePopup', this.showKefu)
			},
  }
}

</script>
<style lang='scss' scoped>
.container {
	background-color: $b;
	min-height: 100vh;
	.head {
		position: relative;
		width: 750rpx;
		height: 500rpx;
		background-image: url('/static/me/wode_bg@2x.png');
		z-index: 1;
		.set {
			position: absolute;
			top: 80rpx;
			right: 30rpx;
		}
		.panel {
			width: 686rpx;
			height: 338rpx;
			z-index: 2;
			background: #FFFFFF;
			// border: 1px solid blue;
			border-radius: 20rpx;
			position: absolute;
			top: 200rpx;
			left:32rpx;
			right: 32rpx;
			.edit {
				position: absolute;
				top:25rpx;
				right: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				text{
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
			.user-box {
				// border: 1px solid red;
				display: flex;
				flex-direction: column;
				margin-top: -100rpx;
				margin-left: 200rpx;
				margin-right: 200rpx;
				min-width: 192rpx;
				height: 280rpx;
				align-items: center;
				justify-content: space-around;
				.avatar {
					width: 154rpx;
					height: 154rpx;
					background: #ffffff;
					border-radius: 50%;
				}
				.user-name{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.tag {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1488FF;
				}
			}
			.nav {
				z-index: 1;
				display: flex;
				padding: 36rpx 0 42rpx;

				.nav-item {
					width: calc(100% / 3);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					font-size: 25rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;

					&:not(:last-of-type) {
						position: relative;

						&::after {
							position: absolute;
							right: 0;
							top: 50%;
							transform: translateY(-50%);
							content: '';
							display: block;
							width: 2rpx;
							background-color: #f5f5f5;
							height: 30rpx;
						}
					}
					.name {
						color: #333333;
					}

					.icon {
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 6rpx;
					}
				}
			}
		}
	}
	.cell-box {
		// border: 1px solid red;
		background: #FFFFFF;
		border-radius: 20rpx;
		color: aliceblue;
		margin: 60rpx 32rpx 0 32rpx;
		width: 686rpx;

		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 22rpx;
		}

		>>>.u-cell_title {
			color: #333333;
		}
	}
}
</style>